<script>
import HumanModelDialog from "@/views/aihuman/humanManagement/addHuman/humanModelDialog.vue";
import HumanModelAttitude from "@/views/aihuman/humanManagement/addHuman/humanModelAttitude.vue";
import HumanModelExpressions from "@/views/aihuman/humanManagement/addHuman/humanModelExpressions.vue";
import HumanActionDialog from "@/views/aihuman/humanManagement/addHuman/humanActionDialog.vue";

export default {
  name: "humanModelStep",
  components: {HumanActionDialog, HumanModelExpressions, HumanModelAttitude, HumanModelDialog},
  data() {
    return {
      model: [],
      attitudes: [],
      expressions: [],
      actions: []
    }
  },
  methods: {
    openModel() {
      this.$refs.humanModelDialog.openDialog(this.model[0])
    },
    getHumanModel(val) {
      this.model = val
      // 选择数字人清空数据
      this.expressions = []
      this.attitudes = []

      this.$refs.humanModelAttitude.tableData = []
      this.$refs.humanModelAttitude.selectedList = []

      this.$refs.humanModelexpressions.tableData = []
      this.$refs.humanModelexpressions.selectedList = []
    },
    getHumanAtti(val) {
      this.attitudes = val
    },
    getAction(bal) {
      console.log(bal, '选择的数据');
      this.actions = bal
    },
    getHumanExpress(val) {
      console.log(val,'表情humanModel');
      this.expressions = val
    },
    openAttitude() {
      console.log(this.model,'数字人');
      if (this.model[0].attitudes === '') {
        this.$message.error('当前数字人没有设置姿态')
        return
      }
      this.$refs.humanModelAttitude.openDialog(JSON.parse(this.model[0].attitudes), this.attitudes)
    },
    openExpression() {
      if (this.model[0].expressions === '') {
        this.$message.error('当前数字人没有设置表情')
        return
      }
      this.$refs.humanModelexpressions.openDialog(JSON.parse(this.model[0].expressions), this.expressions)
    },
    openActions() {
      this.$refs.humanAction.openDialog(this.actions)
    }
  }
}
</script>

<template>
  <div class="content">
    <h3>配置动作</h3>

    <el-row :gutter="50">
      <el-col v-if="false" :span="12">
<!--        <div class="selection-box">
          <header>
            <div>
              数字人模型
            </div>
            <el-button type="text" @click="openModel">资源库选择></el-button>
          </header>

          <div class="selection-box__body">
            <el-tag v-for="item in model" :key="item.id" size="small">
              {{ item.name }}
            </el-tag>

          </div>
        </div>-->

<!--        <div class="selection-box">
          <header>
            <div>
              选择动作
            </div>
            <el-button type="text" @click="openActions">资源库选择></el-button>
          </header>

          <div class="selection-box__body">
            <el-tag v-for="item in actions" :key="item.id" size="small">
              {{ item.name }}
            </el-tag>
          </div>
        </div>-->
      </el-col>
      <el-col :span="12">
        <div class="selection-box">
          <header>
            <div>
              选择动作
            </div>
            <el-button type="text" @click="openActions">资源库选择></el-button>
          </header>

          <div class="selection-box__body">
            <el-tag v-for="item in actions" :key="item.id" size="small">
              {{ item.name }}
            </el-tag>
          </div>
        </div>

<!--        <div class="selection-box">
          <header>
            <div>
              默认姿态
            </div>
            <el-button type="text" @click="openAttitude">选择></el-button>
          </header>

          <div class="selection-box__body selection-box__body&#45;&#45;small">
            <el-tag v-for="item in attitudes" :key="item.value" size="small">
              {{ item.name }}
            </el-tag>

          </div>
        </div>

        <div class="selection-box">
          <header>
            <div>
              默认表情
            </div>
            <el-button type="text" @click="openExpression">选择></el-button>
          </header>

          <div class="selection-box__body selection-box__body&#45;&#45;small">
            <el-tag v-for="item in expressions" :key="item.value" size="small">
              {{ item.name }}
            </el-tag>
          </div>
        </div>-->
      </el-col>
    </el-row>


    <human-model-dialog
      ref="humanModelDialog"
      @get-select="getHumanModel"
    />

    <human-model-expressions
      ref="humanModelexpressions"
      @get-select="getHumanExpress"

    />
    <human-model-attitude
      ref="humanModelAttitude"
      @get-select="getHumanAtti"
    />

    <human-action-dialog
      ref="humanAction"
      @get-select="getAction"
    />
  </div>


</template>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin-left: 10px;
}

.selection-box {
  width: 100%;

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__body {
    background: #F8F8F8;
    border-radius: 5px;
    padding: 15px;
    height: 100px;
    box-sizing: border-box;

    &--small {
      height: 80px;
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
}

</style>
